<template>
	<div class="menu">
		<ToolBar>
			<el-button v-permission="permission.save.code" type="primary" icon="el-icon-plus" size="small" @click="addMenu(false)">添加</el-button>
		</ToolBar>
		<el-tree :indent="38" :props="props" :data="data" @node-click="handleNodeClick" :render-content="renderContent">
		</el-tree>
		<MenuEdit :title="dialogForm.title" :dialogFormVisible="dialogForm.visible" :data="dialogForm.data"
		 :departTree="data" @val-change="valChange" @cancel="dialogForm.visible = false">
		</MenuEdit>
	</div>
</template>

<script>
	import ToolBar from '~/components/ToolBar/ToolBar.vue';
	import TreeDetails from './TreeDetails.vue';
	import MenuEdit from './menu_edit.vue'
	import permissions from '../permissions.js'
	export default {
		data() {
			return {
        permission: permissions.menu,
				btns: {
					list: {},
					del: {}
				},
				//弹出框对象
				dialogForm: {
					title: "",
					visible: false,
					data: {}
				},
				currentEditCategory: null,
				data: [],
				props: {
					label: 'name',
					children: 'children'
				},
			}
		},
		methods: {
			deleteMenu(data) {
				console.log(data)
				let self = this;
				this.$confirm(`此操作将删除 [${data.name}] 该菜单, 是否继续?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					//========================================
					this.btns.del.request({id: data.id}, res => {
						this.$message.success("删除成功！");
						this.btns.list.request(null, res => {
							this.data = res;
						});
					})
					self.dialogFormVisible = false;
					//========================================删除这坨
					// self.$Api.departDelete({id:id},r=>{
					//   self.$notify({
					//     title: '成功',
					//     message: '部门删除成功！',
					//     type: 'success'
					//   });
					//   self.init();
					// });
				}).catch(() => {

				});

			},
			addMenu(data) {
				this.dialogForm.visible = true;
				self.currentEditCategory = null;
				if (!data) {
					this.dialogForm.data = {};
					this.dialogForm.title = '添加顶级菜单';
				} else {
					this.dialogForm.data = {};
					this.dialogForm.data.pid = data.id; //添加子菜单，把当前菜单id作为新增菜单pid
					this.dialogForm.title = '添加“' + data.name + '”的子菜单';
				}

			},
			editMenu(data) {
				this.dialogForm.visible = true;
				this.dialogForm.data = data;
				this.dialogForm.title = '修改“' + data.name + '”菜单';
			},

			valChange(data) {
				this.$message.success('保存成功!');
				this.btns.list.request(null, res => {
					this.data = res;
				})
				this.dialogForm.visible = false;
			},
			handleNodeClick(data, k) {

			},
			renderContent(h, {
				node,
				data,
				store
			}) {
				return this.$createElement('TreeDetails', {
					props: {
						data: node
					},
					on: {
						'add-menu': this.addMenu,
						'edit-menu': this.editMenu,
						'delete-menu': this.deleteMenu,
					}
				});
			},
			init() {
				let self = this;
				// self.$Api.departList({}, r => {
				//   self.data = self.$Func.departTree(r);
				// });
			}

		},
		components: {
			ToolBar,
			TreeDetails,
			MenuEdit
		},
		mounted: function() {
			this.permission.list.request(null, res => {
				this.data = res;
			})
			this.init();
		}
	}
</script>
<style lang="less">
	.menu {
		.el-tree-node__content {
			height: 40px;
			line-height: 40px;
		}
	}
</style>
